<template>
	<div class>
		<ul class="pl10 pt5 pb5 lh25 fs14">
			<li :class="{active:curResoluTion==='1' && chartType===3&&!panKouShow}" @click="setChartResolution('1',3)">分时</li>
			<li :class="{active:curResoluTion==='1' && chartType===1&&!panKouShow}" @click="setChartResolution('1',1)">1分</li>
			<li :class="{active:curResoluTion==='3' && !panKouShow}" @click="setChartResolution('3')">3分</li>
			<li :class="{active:curResoluTion==='5' && !panKouShow}" @click="setChartResolution('5')">5分</li>
			<li class="timeToggle" @click="toggleSubTime">
				<span class="fs14">
					<i v-show="curResoluTion!=='10'&&curResoluTion!=='30'&&curResoluTion!=='60'&&curResoluTion!=='D'">10分</i>
					<i :class="{active:curResoluTion==='10'}" v-show="curResoluTion==='10'">10分</i>
					<i :class="{active:curResoluTion==='30'}" v-show="curResoluTion==='30'">30分</i>
					<i :class="{active:curResoluTion==='60'}" v-show="curResoluTion==='60'">1时</i>
					<i :class="{active:curResoluTion==='D'}" v-show="curResoluTion==='D'">日K</i>
				</span>
				<div v-show="subTime">
					<p @click.stop="setChartResolution('10')">10分</p>
					<p @click.stop="setChartResolution('30')">30分</p>
					<p @click.stop="setChartResolution('60')">1时</p>
					<p @click.stop="setChartResolution('D')">日K</p>
				</div>
			</li>
			<li :class="{active:studyShow}" class="iconfont icon-shuju" @click="setChartStudy"></li>
			<li :class="{active:panKouShow}" @click="togglePanKou">盘口</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "control",
		props: {
			subTime: {
				type: Boolean,
				required: true,
				default: false,
			},
			toggleSubTime: {
				type: Function,
				required: true,
				default: () => {},
			},
			panKouShow: {
				type: Boolean,
				required: true,
				default: false,
			},
			
			chartType: {
				type: Number,
				required: true,
				default: 0,
			},
			curResoluTion: {
				type: String,
				required: true,
				default: '',
			},
			studyShow: {
				type: Boolean,
				required: true,
				default: false,
			},
			togglePanKou: {
				type: Function,
				required: true,
				default: () => {},
			},
			setChartResolution: {
				type: Function,
				required: true,
				default: () => {},
			},
			setChartStudy: {
				type: Function,
				required: true,
				default: () => {},
			},
		},
		created() {

		}
	};
</script>
<style scoped lang='scss'>
	ul {
		display: flex;
	}

	ul li:last-child {
		margin-right: rem(10px);
	}

	ul li {
		background-color: #fff;
		flex: 1;
		margin-right: rem(5px);
		border-radius: rem(2px);
		white-space: nowrap;
		color: #333;
	}

	ul .active {
		color: #febb02;
	}

	ul li .icon {
		vertical-align: rem(-6px);
	}

	.timeToggle {
		position: relative;
	}
	.timeToggle::after {
		content: "";
		width: 0;
		height: 0;
		border: rem(6px) solid transparent;
		border-bottom-color: #feaa37;
		position: absolute;
		bottom: rem(-5px);
		right: rem(-6px);
		transform: rotate(135deg);
	}

	.timeToggle div {
		position: absolute;
		top: rem(30px);
		min-width: rem(60px);
		background-color: #fff;
		border-radius: rem(2px);
		box-shadow: 0 0 rem(4px) rgba(73, 64, 64, 0.3);
		font-size: rem(14px);
		line-height: rem(30px);
		white-space: nowrap;
		z-index: 99;
	}

	.timeToggle div p {
		border-bottom: 1px solid #e2e2e2;
	}

	.timeToggle div p:last-child {
		border-bottom: 0 none;
	}

	.gold .active {
		color: #febb02;
	}
</style>